import React, {Component} from 'react';
import {Layout, message} from 'antd';
import './Ibody_about.css';

const {Footer} = Layout;


export default class Ibody_about extends Component {
    constructor(props) {
        super(props);
        this.state = {
            WXview: "none",
            SJview: "none"
        }
    }

    onShowWX() {
        this.setState({
            WXview: "block"
        })
    }

    onHideWX() {
        this.setState({
            WXview: "none"
        })
    }

    onShowSJ() {
        this.setState({
            SJview: "block"
        })
    }

    onHideSJ() {
        this.setState({
            SJview: "none"
        })
    }
    handleUpdate = () => {
        message.info("暂无更新！！！！！！")
    }
    handlePro = () => {
        message.info("暂无问题！！！！！！")
    }

    render() {
        return (

            <div id="about">
                <footer id='footer'>
                    <div className="footer-wrap">
                        <div className="ant-row">
                            <div className="ant-col-xs-24 ant-col-sm-24 ant-col-md-6">
                                <div className="footer-center"><h1 style = {{color: 'white'}}><span>相关链接</span></h1>
                                    <div><a href="http://i.whut.edu.cn/">武汉理工大学</a></div>
                                    <div><a href="http://www.craes.cn/">中国环境科学研究院</a></div>
                                    <div><a href="http://www.ccement.com/">中国水泥网</a></div>
                                    <div><a href="http://www.dcement.com/">数字水泥网</a></div>
                                    <div><a target="_blank" rel="noopener noreferrer" href="https://index.ccement.com/"><span>水泥价格指数</span></a>
                                    </div>
                                    <div>
                                        {/* <a href="#">科技基础性工作专题网站</a> */}
                                    </div>
                                </div>
                            </div>
                            <div className="ant-col-xs-24 ant-col-sm-24 ant-col-md-6">
                                <div className="footer-center"><h1 style = {{color: 'white'}}><span>行业相关</span></h1>
                                    <div><a href="http://www.ccement.com/"><span>国家行业政策</span></a></div>
                                    <div><a href="http://www.ccement.com/"><span>行业标准和规范</span></a></div>
                                </div>
                            </div>
                            <div className="ant-col-xs-24 ant-col-sm-24 ant-col-md-6">
                                <div className="footer-center"><h1 style = {{color: 'white'}}><span>帮助</span></h1>
                                    <div onClick = {this.handleUpdate} style = {{cursor: 'pointer'}}><span>更新记录</span></div>
                                    <div onClick = {this.handlePro} style = {{cursor: 'pointer'}}><span>常见问题</span></div>
                                </div>
                            </div>
                            <div className="ant-col-xs-24 ant-col-sm-24 ant-col-md-6">
                                <div className="footer-center"><h1 style = {{color: 'white'}}><span>联系我们</span></h1>
                                    <div>
                                        <i style={{color: 'white'}} className="iconfont icon-dianhua" target="_blank"
                                           rel="noopener noreferrer"
                                           href="https://weibo.com/"/>
                                        <span> - </span><span>宋华珠-13866668888</span>
                                    </div>
                                    {/* <div>
                                        <a
                                            className="iconfont icon-weixin"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            href="https://weibo.com/"
                                            style={{color: "white"}}
                                            onMouseOver={() => {
                                                this.onShowWX()
                                            }}
                                            onMouseOut={() => {
                                                this.onHideWX()
                                            }}
                                        />
                                        <span> - </span><span>微信二维码</span>
                                        <li className="weixin" style={{display: this.state.WXview}}>
                                            <img style={{width: '100px', height: '100px'}} alt=""
                                                 src={require("../img/clients/WX.jpg")}/>
                                        </li>
                                    </div>
                                    <div><a className="iconfont icon-QQ"
                                            target="_blank"
                                            href="http://wpa.qq.com/msgrd?v=3&uin=728338999&site=qq&menu=yes"/><span> - </span><span>QQ临时会话</span>
                                    </div>
                                    <div><a className="iconfont icon-weibo" target="_blank" rel="noopener noreferrer"
                                            href="https://weibo.com/"/><span> - </span><span>微博</span>
                                    </div>
                                    <div><a className="iconfont icon-GitHub" target="_blank" rel="noopener noreferrer"
                                            href="https://github.com/softlabwhut"/><span> - </span><span>GitHub</span>
                                    </div> */}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="bottom-bar">
                        SmartLab Design ©2018 Powerd By
                        <a target="_blank" rel="noopener noreferrer"
                           href="https://www.baidu.com"
                           style={{color: 'hsla(0,0%,100%,.65)'}}> 武汉理工大学智能技术实验室</a>
                    </div>
                </footer>
            </div>

        )
    }
}
